<template>
	<view class="cart" v-if="cart.length!==0">
	<view class="cate">
		<uni-icons type="shop" size="18"></uni-icons>
		<text class="cate-title">预约项</text>
	</view>
	<uni-swipe-action>
		<view v-for="(goods,i) in cart" :key="i" class="num">
			<uni-swipe-action-item :rightOptions="options" @click="swipeItem(goods)">
		<radio color="#C00000" :checked="goods.goods_selected" @click="radioClick(i)"></radio>
		<text class="title">{{goods.goods_from}}</text> 
			<text>{{goods.goods_a}}老师</text>
			<text>{{goods.goods_name}}项目</text>
			<text>{{goods.goods_price}}</text>
			<uni-number-box :min="1" :value="goods.goods_count" @change="numChange(i,$event)"></uni-number-box>
			</uni-swipe-action-item>
		</view>
		</uni-swipe-action>
		<view class="my-settle">
			<label class="radio">
				<radio color="#C00000" :checked="isFullCheck" @click="Allchecked"/><text>全选</text>
				</label>
				<view class="among-box">
					合计:<text class="amount">{{CheckedAmout}}</text>
				</view>
				<view class="btn-settle" @click="settlement">结算({{checked}})</view>
		</view>
	</view>
	<view class="empty" v-else>
		<image src="../../static/kong.png" class="empty-image"></image>
		<text class="kong">这里什么都没有，空空如也~</text>
	</view>
</template>

<script>
	import badgeMax from '@/mixins/tarbar.js'
	import {mapState,mapMutations,mapGetters} from 'vuex'
	export default {
		mixins:[badgeMax],
		computed:{
		...mapState('m-cart',['cart']),
		...mapGetters('m-cart',['checked','total','CheckedAmout']),
		...mapState('m-user',['token']),
		isFullCheck(){
			return this.total===this.checked
		}
		},
		data() {
			return {
				options:[{
					text:'删除',
					style:{
						backgroundColor:'#C00000'
					}
				}],
				seconds:3,
				timer:null
			};
		},
		methods:{
			...mapMutations('m-cart',['removeGoods']),
			...mapMutations('m-user',['updateRediectInfo']),
			radioClick(index){
				 if (this.cart[index].goods_selected) {
				this.cart[index].goods_selected = false;
				}else{
					this.cart[index].goods_selected = true;
				}
			},
			numChange(index,val){
				this.cart[index].goods_count = val;
				    this.$store.commit('m-cart/saveToStorage');
			},
			swipeItem(goods){
				this.removeGoods(goods.goods_id)
			},
			Allchecked(){
				if(this.total!==this.checked){
					for(let i=0;i<this.cart.length;i++)
					this.cart[i].goods_selected=true
					this.$store.commit('m-cart/saveToStorage');
				}else{
					for(let i=0;i<this.cart.length;i++)
					this.cart[i].goods_selected=false
					this.$store.commit('m-cart/saveToStorage');
				}
			},
			settlement(){//点击了结算按钮
				if(!this.checked) return uni.$showMsg('请选择要结算的项目！')
				if(!this.token) return this.delayNavigate()
				
				//this.payOrder()
			},
			async payOrder(){
				const orderInfo={
					//order_price:this.CheckedAmout,
					order_price:0.01,
					goods:this.cart.filter(x=>x.goods_selected).map(x=>({
						goods_id:x.goods_id,
						goods_number:x.goods_count,
						goods_price:x.goods_price
					}))
				}
				const {data:res} =await uni.$http.post('/api/public/v1/my/orders/create',orderInfo)//发起请求
				if(res.map.status!==200) return uni.$showMsg('创建订单失败！')
				const orderNumber=res.message.order_number
			},
			showTips(n){
				uni.showToast({
					icon:'none',
					title:'请登录后再结算，'+n+'秒之后自动跳转到登录页',
					mask:true,
					duration:1500
				})
			},
			delayNavigate(){
				//延迟导航页面
				this.showTips(this.seconds)
				this.timer=setInterval(()=>{this.seconds--
				if(this.seconds<=0){
					clearInterval(this.timer)
					uni.switchTab({
						url:'/pages/cart/cart',
						success: () => {
							this.updateRediectInfo({
								openType:'switchTab',
								from:'/pages/cate/cate'
							})
						}
					})
				}
				this.showTips(this.seconds)
				},1000)
			}
	},
	}
</script>

<style lang="scss">
.cate{
	height: 40px;
	display: flex;
	align-items: center;
	padding-left: 5px;
	border-bottom: 1px soloid #efefef;
.cate-title{
	font-size: 14px;
	margin-left: 10px;
}
}
.num{
	display: flex;
	width: 100%;
	box-sizing: border-box;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1px solid #f0f0f0;
	padding: 10px 5px;
	
}
.my-settle{
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 50px;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 14px;
	padding-left: 5px;
}
.title{
	font-weight: bold;
	padding: 5px;
}
.cart{
	padding-bottom: 50px;
}
.radio{
	display: flex;
	align-items: center;
}
.among-box{
	.amount{
		color: #c00000;
		font-weight: bold;
	}
}
.btn-settle{
	background-color: #c00000;
	height: 50px;
	color: white;
	line-height: 50px;
	padding: 0 10px;
	min-width: 100px;
	text-align: center;
}
.empty{
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-top: 100px;
	.empty-image{
		width: 90px;
		height: 90px;
	}
	.kong{
		font-size: 12px;
		color: gray;
		margin-top: 15px;
	}
}
</style>
